<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <el-dialog
        v-model="dialogVisible"
        title="修改头像"
        width="500"
    >
      <div>
        <div class="flex space-x-4 head-box">
          <div class="relative" style="flex-shrink: 0">
            <img :src="waitAvatar" alt="用户头像" class="w-20 h-20 rounded-full object-cover" />
          </div>
          <div class="recommend-head-box">
            <div class="recommend-head-item" v-for="o in 10"></div>
            <el-upload
                action="#"
                :http-request="requestUpload"
                :show-file-list="false"
                :before-upload="beforeUpload"
            >
              <div class="recommend-head-item">
                <el-icon><EditPen /></el-icon>
              </div>
            </el-upload>
          </div>
         
        </div>
        <div class="error-tips">{{errorTips}}</div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadImg()">
            修改
          </el-button>
        </div>
      </template>
    </el-dialog>
    <div class="max-w-4xl mx-auto py-8 px-4">
      <!-- 基本信息区域 -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <div class="flex items-start justify-between">
          <div class="flex items-center space-x-4">
            <div class="relative">
              <img :src="userInfo.avatar" alt="用户头像" class="w-20 h-20 rounded-full object-cover" />
              <button @click="dialogVisible = true;" class="edit-icon absolute bottom-0 right-0 bg-white rounded-full p-1 shadow-md hover:bg-gray-50">
                <el-icon class="text-gray-600"><EditPen /></el-icon>
              </button>
            </div>
            <div>
              <h2 class="text-xl font-medium">{{ userInfo.nickName }}</h2>
              <p class="text-gray-500 mt-1">{{ userInfo.signature }}</p>
            </div>
          </div>

        </div>
      </div>

      <!-- 个人资料区域 -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 class="text-lg font-medium mb-4 flex items-center">
          <span>个人资料</span>
          <el-button v-if="!isEdit" type="text" class="!rounded-button whitespace-nowrap ml-2" @click="isEditFun">
            <el-icon class="text-gray-600"><EditPen /></el-icon>
          </el-button>
        </h3>
        <div class="grid grid-cols-3 gap-2">
          <div class="space-y-2">
            <p class="text-gray-500">昵称</p>
            <p style="padding-right: 30px">
              <el-input v-if="isEdit" v-model="userInfoEdit.nickName"></el-input>
              <span v-else>{{userInfo.nickName}}</span>
            </p>
          </div>
          <div class="space-y-2">
            <p class="text-gray-500">性别</p>
            <p style="padding-right: 30px">
              <el-radio-group v-if="isEdit" v-model="userInfoEdit.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                <el-radio label="其他"></el-radio>
              </el-radio-group>
              <span v-else>{{userInfo.sex}}</span>
            </p>
          </div>
          <div class="space-y-2">
            <p class="text-gray-500">年龄</p>
            <p style="padding-right: 30px">
              <el-input v-if="isEdit" v-model="userInfoEdit.age"></el-input>
              <span v-else>{{userInfo.age}}</span>
            </p>
          </div>
          <div class="space-y-2">
            <p class="text-gray-500">城市</p>
            <p style="padding-right: 30px">
              <el-input v-if="isEdit" v-model="userInfoEdit.city"></el-input>
              <span v-else>{{userInfo.city}}</span>
            </p>
          </div>
          <div class="space-y-2">
            <p class="text-gray-500">手机号</p>
            <p style="padding-right: 30px">
              <el-input v-if="isEdit" v-model="userInfoEdit.phone"></el-input>
              <span v-else>{{userInfo.phone}}</span>
            </p>
          </div>
          <div class="space-y-2">
            <p class="text-gray-500">email</p>
            <p style="padding-right: 30px">
              <el-input v-if="isEdit" v-model="userInfoEdit.email"></el-input>
              <span v-else>{{userInfo.email}}</span>
            </p>
          </div>
        </div>
        <div class="grid grid-cols-1 gap-6" style="margin-top: 10px">
          <div class="space-y-2">
            <p class="text-gray-500">签名</p>
            <p style="padding-right: 30px">
              <el-input v-if="isEdit" type="textarea" v-model="userInfoEdit.signature"></el-input>
              <span v-else>{{userInfo.signature}}</span>
            </p>
          </div>
          <div style="text-align: right;padding-right: 30px" v-if="isEdit">
            <el-button type="primary" class="!rounded-button whitespace-nowrap"  @click="isEdit = false">
              取消
            </el-button>
            <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="updateMyInfoEditFun">
              修改
            </el-button>
          </div>
        </div>
      </div>

      <!-- 安全设置区域 -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-6" v-if="false">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium">安全设置</h3>
          <NuxtLink to="/userPage/changePassword">
            <el-button type="primary" class="!rounded-button whitespace-nowrap">
              修改密码
            </el-button>
          </NuxtLink>
        </div>
        <div class="border-t pt-4">
          <h4 class="font-medium mb-4">实名认证信息</h4>
          <el-form :model="authForm" label-width="100px">
            <el-form-item label="姓名" required>
              <el-input v-model="authForm.name" placeholder="请输入真实姓名" class="w-64" />
            </el-form-item>
            <el-form-item label="身份证号" required>
              <el-input v-model="authForm.idCard" placeholder="请输入身份证号码" class="w-64" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 账号认证 -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-6" v-if="false">
        <h3 class="text-lg font-medium mb-4">账号认证</h3>
        <div class="flex items-center justify-between py-4 border-b">
          <NuxtLink to="/userPage/EnterpriseCertification">
            <div>企业认证</div>
          </NuxtLink>

         <div>个人认证</div>
        </div>
      </div>
      <!-- 账号关联区域 -->
      <div class="bg-white rounded-lg shadow-sm p-6" v-if="false">
        <h3 class="text-lg font-medium mb-4">账号关联</h3>
        <div class="flex items-center justify-between py-4 border-b">
          <div class="flex items-center space-x-3">
            <el-icon class="text-2xl text-green-500"><Message /></el-icon>
            <div>
              <p class="font-medium">微信账号</p>
              <p class="text-gray-500 text-sm">绑定后可以使用微信快捷登录</p>
            </div>
          </div>
          <el-button type="success" class="!rounded-button whitespace-nowrap">
            立即绑定
          </el-button>
        </div>
        <div class="mt-6">
          <el-table :data="accountList" style="width: 100%">
            <el-table-column prop="index" label="序号" width="80" />
            <el-table-column prop="account" label="账号" />
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="level" label="用户等级" />
            <el-table-column prop="expireDate" label="到期时间" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="danger" size="small" class="!rounded-button whitespace-nowrap" @click="unbindAccount(scope.row)">
                  解除绑定
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {Camera, EditPen, Message} from '@element-plus/icons-vue';

import {getMyInfo, updateMyInfoEdit} from "@/api/user";
import {updateMyAvatarEdit} from "@/api/file";

const dialogVisible = ref(false)

const isEdit = ref(false);

onMounted(() =>{
  getMyInfoFun();
})

const fileHead = ref([]); // 头像

/** 覆盖默认上传行为 */
function requestUpload() {
}

const errorTips = ref('');

/** 上传预处理 */
const beforeUpload = (file, type) => {
  errorTips.value = '';
  // 检查文件类型
  if (file && file.type.indexOf("image/") == -1) {
    console.log("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
    errorTips.value = "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。";
    return false;
  }
  
  // 检查文件大小（限制为2MB）
  const maxSize = 1 * 1024 * 1024; // 2MB
  if (file.size > maxSize) {
   console.log("文件大小不能超过2MB");
   errorTips.value = "头像文件大小不能超过1MB";
    return false;
  }
  fileHead.value = file;
  waitAvatar.value = URL.createObjectURL(file);
  return true;
}

/** 上传图片 */
const uploadImg = async () => {
  let formData = new FormData();
  formData.append("file", fileHead.value);
  updateMyAvatarEdit(formData).then(response => {
    if(response.suc){
      dialogVisible.value = false;
      userInfo.value.avatar = waitAvatar.value;
    }
  });
}


const getMyInfoFun = () =>{
  getMyInfo().then(res =>{
    console.log(res)
    userInfo.value = res.data;
    waitAvatar.value = res.data.avatar;
  })
}

const isEditFun = () =>{
  isEdit.value = true;
  userInfoEdit.value = Object.assign({}, userInfo.value);
}

const updateMyInfoEditFun = () =>{
  updateMyInfoEdit(userInfoEdit.value).then(res =>{
    if(res.suc){
      console.log(res)
      userInfo.value = Object.assign({}, userInfoEdit.value);
      isEdit.value = false;
    }
  })
}

const waitAvatar = ref(null)

const userInfo = ref({
  nickname: '',
  signature: '',
  age: null,
  gender: '',
  city: '',
  wechat: '',
  avatar:'',
});

const userInfoEdit = ref({
  nickname: '',
  signature: '',
  age: null,
  gender: '',
  city: '',
  wechat: '',
  avatar:'',
});

const authForm = ref({
  name: '',
  idCard: ''
});

const accountList = ref([
  {
    index: 1,
    account: 'mxsik',
    nickname: '贸行四海',
    level: '初级',
    expireDate: '2025.3.24'
  },
  {
    index: 2,
    account: 'mxsik',
    nickname: '贸行四海',
    level: '初级',
    expireDate: '2025.3.24'
  }
]);

const unbindAccount = (row) => {
  console.log('解除绑定', row);
};
</script>

<style scoped>
.edit-icon{
  width: 30px;
  height: 30px;
  cursor: pointer;

}

.head-box img{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.recommend-head-box{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.recommend-head-item{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.el-input {
  --el-input-border-color: #dcdfe6;
  --el-input-hover-border-color: #c0c4cc;
}

.el-button--primary {
  --el-button-bg-color: #409eff;
  --el-button-border-color: #409eff;
}

.el-button--success {
  --el-button-bg-color: #67c23a;
  --el-button-border-color: #67c23a;
}

.el-button--danger {
  --el-button-bg-color: #f56c6c;
  --el-button-border-color: #f56c6c;
}
</style>

